:root {
  color-scheme: dark;

  --theme-secondary-color: #cedae2;
  --theme-container-background: #141f2d;
  --theme-container-accent-background: #202c3d;
  --theme-container-background-hover: #1c2c3f;
  --theme-container-box-shadow: none;
  --theme-container-border: 1px solid #22303f;
  --theme-social-icon-invert: invert(100%);
  --theme-color: #ffffff;

  /* Base */
  --base: #f9f9f9;
  --base-inverted: #000;

  --base-100: var(--base);
  --base-90: #efefef;
  --base-80: #d6d6d7;
  --base-70: #bdbdbd;
  --base-60: #a3a3a3;
  --base-50: #8a8a8a;
  --base-40: #717171;
  --base-30: #575757;
  --base-20: #3d3d3d;
  --base-10: #242424;
  --base-0: #090909;

  /* Brand */
  --accent-brand-lighter: rgb(var(--indigo-400));
  --accent-brand: rgb(var(--indigo-500));
  --accent-brand-darker: rgb(var(--indigo-600));

  /* Success */
  --accent-success: rgb(var(--green-600));
  --accent-success-darker: rgb(var(--green-700));
  --accent-success-lighter: rgb(var(--green-500));
  --accent-success-a10: rgba(var(--green-600), 0.2);

  /* Warning */
  --accent-warning: rgb(var(--yellow-500));
  --accent-warning-darker: rgb(var(--yellow-600));
  --accent-warning-lighter: rgb(var(--yellow-400));
  --accent-warning-a10: rgba(var(--yellow-500), 0.2);

  /* Danger */
  --accent-danger: rgb(var(--red-600));
  --accent-danger-darker: rgb(var(--red-700));
  --accent-danger-lighter: rgb(var(--red-500));
  --accent-danger-a10: rgba(var(--red-600), 0.2);

  /***********************************************
  ** Functional color variables. *****************
  ***********************************************/

  /* Main colors */
  --body-bg: rgb(var(--black));
  --body-color: rgb(var(--grey-50));
  --body-color-inverted: rgb(var(--black));

  /* Main content containers */
  --card-bg: rgb(var(--grey-900));
  --card-color: rgb(var(--grey-50));
  --card-color-secondary: rgb(var(--grey-300));
  --card-color-tertiary: rgb(var(--grey-400));
  --card-secondary-bg: rgb(var(--grey-900));
  --card-secondary-color: rgb(var(--grey-200));
  --card-tertiary-bg: rgb(var(--grey-800));
  --card-tertiary-bg-hover: rgba(var(--grey-800), 0.9);
  --card-border: rgba(var(--white), 0.15);
  --card-secondary-border: rgba(var(--white), 0.1);

  /* Header */
  --header-bg: rgb(var(--grey-900));
  --header-shadow: rgb(var(--black));

  /* Footer */
  --footer-bg: rgb(var(--grey-900));
  --footer-color: rgb(var(--grey-400));

  /* Links */
  --link-bg-hover-alt: rgba(var(--base-inverted));
  --link-color-current: var(--base-100);
  --link-color-secondary: var(--base-70);
  --link-color-secondary-hover: var(--base-80);
  --link-bg-current: var(--card-bg);

  /* Primary buttons */
  --button-primary-bg: var(--accent-brand-darker);
  --button-primary-bg-hover: var(--accent-brand);
  --button-primary-color: rgb(var(--white));
  --button-primary-color-hover: rgb(var(--white));
  /* -- Inverted */
  --button-primary-inverted-bg: var(--accent-brand);
  --button-primary-inverted-bg-hover: var(--accent-brand-lighter);
  --button-primary-inverted-color: var(--base-0);
  --button-primary-inverted-color-hover: var(--base-0);

  /* Secondary buttons */
  --button-secondary-bg: var(--base-20);
  --button-secondary-bg-hover: var(--base-30);
  --button-secondary-color: var(--base-80);
  --button-secondary-color-hover: var(--base-100);

  /* Outlined buttons */
  --button-outlined-bg: transparent;
  --button-outlined-bg-hover: rgba(255, 255, 255, 0.035);
  --button-outlined-border: var(--base-20);
  --button-outlined-border-hover: var(--base-30);
  --button-outlined-color: var(--base-80);
  --button-outlined-color-hover: var(--base-100);

  /* Ghost buttons */
  --button-ghost-bg: transparent;
  --button-ghost-bg-hover: rgba(255, 255, 255, 0.035);
  --button-ghost-color: var(--base-80);
  --button-ghost-color-hover: var(--base-100);
  --button-ghost-dimmed-color: var(--base-60);
  --button-ghost-dimmed-color-hover: var(--base-100);
  /* -- Inverted */
  --button-ghost-inverted-bg: transparent;
  --button-ghost-inverted-bg-hover: rgba(0, 0, 0, 0.1);
  --button-ghost-inverted-color: var(--base-30);
  --button-ghost-inverted-color-hover: var(--base-10);

  /* Forms */
  --form-bg: rgb(var(--black));
  --form-bg-focus: rgb(var(--black));
  --form-border: rgb(var(--grey-700));
  --form-border-hover: rgb(var(--grey-600));
  --form-border-focus: var(--focus);
  --form-placeholder-color: rgb(var(--grey-600));

  /* Form labels */
  --label-primary: rgb(var(--grey-50));
  --label-secondary: rgb(var(--grey-30));

  /* Snackbars */
  --snackbar-bg: rgb(var(--grey-50));
  --snackbar-color: rgb(var(--grey-900));

  /* Tabs */
  --tab-color: rgb(var(--grey-100));
  --tab-color-hover: var(--accent-brand-lighter);
  --tab-color-current: rgb(var(--grey-50));
  --tab-bg-hover: rgba(var(--accent-brand-rgb), 0.2);
  --tab-bg-current: rgb(var(--accent-brand));

  /* Tags */
  --tag-color: rgb(var(--grey-300));
  --tag-color-hover: rgb(var(--grey-100));
  --tag-bg: rgba(var(--grey-50), 0.05);
  --tag-bg-hover: rgba(var(--grey-50), 0.05);
  --tag-prefix: rgba(var(--grey-50), 0.6);
  --tag-prefix-hover: rgb(var(--grey-50));
  --tag-onboarding-bg: var(--grey-900);
  --tag-onboarding-border: var(--grey-700);

  /* Story */
  --story-comments-bg: rgb(var(--grey-800));
  --story-comments-bg-top: rgba(var(--grey-800), 0);
  --story-comments-bg-bottom: rgba(var(--grey-800), 1);

  /* Select icon */
  --select-icon: url();

  /* Reactions */
  --reaction-like-color: rgb(var(--red-500));
  --reaction-like-bg: rgba(var(--red-500), 0.1);
  --reaction-custom-color: rgb(var(--green-600));
  --reaction-custom-bg: rgb(var(--green-600), 0.1);
  --reaction-save-color: rgb(var(--indigo-500));
  --reaction-save-bg: rgba(var(--indigo-500), 0.1);
  --reaction-comment-color: rgb(var(--yellow-500));
  --reaction-comment-bg: rgba(var(--yellow-500), 0.1);

  /* Code */
  --code-inline-bg: rgb(var(--white), 0.1);

  /* Onboarding suggested people */
  --content-row-hover-bg: rgba(var(--base-20));
}

:root {
  /*
  Separating some variables here as these are the results
  of broader Crayons refactoring (see #15311) and I did not
  want to mix everything together.
  */

  /***********************************************
  ** Buttons *************************************
  ***********************************************/

  /* Buttons: Default */
  --btn-bg: transparent;
  --btn-bg-hover: rgba(var(--indigo-900), 0.75);
  --btn-color: rgb(var(--grey-300));
  --btn-color-hover: rgb(var(--indigo-300));

  --btn-current-bg: rgb(var(--grey-700));
  --btn-current-color: rgb(var(--grey-50));

  /* Buttons: Primary */
  --btn-primary-bg: rgb(var(--indigo-700));
  --btn-primary-bg-hover: rgb(var(--indigo-600));
  --btn-primary-color: rgba(var(--white), 0.9);
  --btn-primary-color-hover: rgb(var(--white));

  /* Buttons: Secondary */
  --btn-secondary-bg: rgba(var(--indigo-600), 0.4);
  --btn-secondary-bg-hover: rgb(var(--indigo-700));
  --btn-secondary-color: rgb(var(--indigo-200));
  --btn-secondary-color-hover: rgb(var(--white));

  /* Buttons: Destructive Default */
  --btn-destructive-bg: transparent;
  --btn-destructive-bg-hover: rgba(var(--red-500), 0.3);
  --btn-destructive-color: rgb(var(--red-400));
  --btn-destructive-color-hover: rgb(var(--red-300));

  /* Buttons: Destructive Primary */
  --btn-primary-destructive-bg: rgb(var(--red-700));
  --btn-primary-destructive-bg-hover: rgb(var(--red-600));
  --btn-primary-destructive-color: rgb(var(--white));
  --btn-primary-destructive-color-hover: rgb(var(--white));

  /***********************************************
  ** Links ***************************************
  ***********************************************/

  /* Links: Default */
  --link-bg: transparent;
  --link-bg-hover: rgba(var(--indigo-900), 0.75);
  --link-color: rgb(var(--grey-300));
  --link-color-hover: rgb(var(--indigo-300));

  --link-current-bg: rgb(var(--grey-700));
  --link-current-color: rgb(var(--grey-50));

  /* Links: Branded */
  --link-branded-bg: transparent;
  --link-branded-bg-hover: rgba(var(--indigo-900), 0.75);
  --link-branded-color: rgb(var(--indigo-400));
  --link-branded-color-hover: rgb(var(--indigo-300));

  /***********************************************
  ** CTAs ****************************************
  ***********************************************/

  /* CTAs: Default */
  --cta-bg: transparent;
  --cta-bg-hover: rgba(var(--indigo-900), 0.75);
  --cta-color: rgb(var(--grey-300));
  --cta-color-hover: rgb(var(--indigo-300));
  --cta-border: rgb(var(--grey-500));
  --cta-border-hover: rgb(var(--indigo-400));

  /* CTAs: Branded */
  --cta-branded-bg: transparent;
  --cta-branded-bg-hover: rgb(var(--indigo-600));
  --cta-branded-color: rgb(var(--indigo-400));
  --cta-branded-color-hover: rgb(var(--white));
  --cta-branded-border: rgb(var(--indigo-400));
  --cta-branded-border-hover: rgb(var(--indigo-500));

  /***********************************************
  ** Tooltips ************************************
  ***********************************************/

  --tooltip-bg: rgba(var(--white), 0.9);
  --tooltip-color: rgb(var(--grey-800));

  /***********************************************
  ** Indicators **********************************
  ***********************************************/

  /* Indicators: Default */
  --indicator-bg: rgb(var(--grey-600));
  --indicator-color: rgb(var(--grey-200));

  /* Indicators: Subtle */
  --indicator-subtle-bg: rgb(var(--grey-700));
  --indicator-subtle-color: rgb(var(--grey-200));  

  /* Indicators: Success */
  --indicator-success-bg: rgb(var(--green-700));
  --indicator-success-color: rgb(var(--green-50));

  /* Indicators: Warning */
  --indicator-warning-bg: rgb(var(--yellow-400));
  --indicator-warning-color: rgb(var(--yellow-900));

  /* Indicators: Danger */
  --indicator-danger-bg: rgb(var(--red-700));
  --indicator-danger-color: rgb(var(--red-50));

  /* Indicators: Info */
  --indicator-info-bg: rgb(var(--indigo-700));
  --indicator-info-color: rgb(var(--indigo-100));

  /***********************************************
  ** List items **********************************
  ***********************************************/
  
  --list-item-bg-hover: rgb(var(--grey-800));
  
  /***********************************************
  ** Checkbox ************************************
  ***********************************************/

  --checkbox-default-bg: rgb(var(--grey-800));

  /***********************************************
  ** Modals **************************************
  ***********************************************/

  --modal-bg: rgb(var(--grey-900));
  --modal-backdrop: rgba(var(--black), 0.6);
  --modal-danger-border-color: rgb(var(--red-400));

  /***********************************************
  ** Colors **************************************
  ***********************************************/
  --color-primary: rgb(var(--grey-50));
  --color-secondary: rgb(var(--grey-400));

  /***********************************************
  ** Pills ***************************************
  ***********************************************/

  --pill-bg: transparent;
  --pill-bg-hover: rgb(var(--grey-800));
  --pill-color: rgb(var(--grey-200));
  --pill-color-hover: rgb(var(--grey-50));
  --pill-border: rgb(var(--grey-500));
  --pill-border-hover: rgb(var(--grey-200));

  /***********************************************
  ** ColorPicker *********************************
  ***********************************************/

  --swatch-border-color: rgb(var(--white), 0.2);

  /***********************************************
  ** Toggles *************************************
  ***********************************************/

  --toggle-rail-bg: rgb(var(--grey-700));
  --toggle-rail-checked-bg: rgb(var(--green-500));
  --toggle-knob-bg: rgb(var(--white));

  /***********************************************
  ** Date Pickers ********************************
  ***********************************************/

  --selected-date-color: var(--body-color);
  --selected-range-color: var(--body-color-inverted);

  /***********************************************
  ** Tag Moderation ******************************
  ***********************************************/

  /* Tag item */
  --tag-item-bg-hover: rgba(var(--indigo-900), 0.5);

  /* Subtract */
  --subtract-color: rgb(var(--red-200));
  --subtract-color-hover: rgb(var(--white));
  --subtract-bg: rgba(var(--red-600), 0.4);
  --subtract-bg-hover: rgb(var(--red-600));

  /* Plus */
  --plus-color: rgb(var(--green-200));
  --plus-color-hover: rgb(var(--white));
  --plus-bg: rgba(var(--green-600), 0.4);
  --plus-bg-hover: rgb(var(--green-600));

  /* Tag name */
  --tag-hash: rgb(var(--grey-500));
  --tag-name: rgb(var(--grey-50));
  --add-tag-hash: rgb(var(--grey-200));

  /***********************************************
  ** Utilities ***********************************
  ***********************************************/

  /* Focus */
  --focus: var(--accent-brand-lighter);

  /* Divider */
  --divider: rgb(var(--grey-700));

  /* Shadows */
  --shadow-1: 0 10px 15px -3px rgba(var(--black), 0.5),
    0 4px 6px -2px rgba(var(--black), 0.25),
    inset 0 0 0 1px rgba(var(--white), 0.1);
  --shadow-2: 0 20px 25px -5px rgba(var(--black), 0.5),
    0 10px 10px -5px rgba(var(--black), 0.25),
    inset 0 0 0 1px rgba(var(--white), 0.1);
  --shadow-smooth: 0px 8px 16px rgba(0, 0, 0, 0.05);
}
